
<!--
    用户注销管理页面
 -->
 <template>
  <div>
      <div style="margin:10px 0;">
                  <el-input v-model="sousuofrom.userName" style="width:200px;" placeholder="请输入昵称" suffix-icon="el-icon-message" class="ml-5"></el-input>
                  <el-button @click="load()" class="ml-5" type="primary">搜索</el-button>
                  <el-button @click="reset()" style="margin-left: 5px;" type="warning">重置</el-button>
                  <!-- <el-button @click="physicianAdd()" style="margin-left: 5px;" type="warning">添加</el-button> -->
      </div>
         <!-- 表格数据 -->
         <el-table :data="tableData" border stripe header-cell-class-name="headerBg">
          <el-table-column type="selection" width="55" />
          <el-table-column prop="id" label="ID" width="50" />
          <el-table-column prop="userName" label="用户名" width="120" />
          <el-table-column prop="imageId" label="用户个人图片" width="120">
            <template slot-scope="scope">
              <el-image
                style="width: 100px; height: 100px"
                :src="$imageUrl + scope.row.imageId"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="userPhone" label="用户手机号" width="160" />
          <el-table-column prop="userSex" label="性别" width="160">
            <template slot-scope="scope">
              {{scope.row.userSex=0?"男":scope.row.userType=1?"女":""}}
            </template>
          </el-table-column>
          <el-table-column prop="userType" label="职业状态" width="160">
            <template slot-scope="scope">
              {{scope.row.userType=0?"用户":scope.row.userType=1?"医师":""}}
            </template>
          </el-table-column>
          <el-table-column prop="prohibition" label="注销状态" width="160" >
          <template slot-scope="scope">
            {{scope.row.prohibition==0?"账号正常":scope.row.prohibition==1?"注销":""}}
          </template>
        </el-table-column>
        <el-table-column prop="recoveryStatus" label="恢复状态" width="160" >
          <template slot-scope="scope">
            {{scope.row.recoveryStatus==1?"未恢复":scope.row.recoveryStatus==2?"已恢复":""}}
          </template>
        </el-table-column>
        <el-table-column prop="cancellationReason" label="注销原因" width="160" />
        <el-table-column prop="cancellationTime" label="注销时间" width="160" />
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button style="background-color: #25d6e2;" @click="details(scope.row)">详情<i class="el-icon-edit"></i></el-button>
              <el-button type="danger" @click="cancelDelete(scope.row.id)">删除<i class="el-icon-edit"></i></el-button>
              <el-button type="warning" @click="ReportAdd(scope.row)">测试<i class="el-icon-edit"></i></el-button>
              <!-- v-if="scope.row.prohibition=0 -->
            </template>
          </el-table-column>
      </el-table>
          <el-dialog
          :title=title
          :visible.sync="detailsViews"
          width="40%"
          center>
          <el-form :model="updateForm" ref="updateForm">
            <el-form-item label="用户个人信息">
              <el-upload
                class="avatar-uploader"
                action="'getImageById?id='+scope.row.imageId"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                style="margin-left: 280px"
                :before-upload="beforeAvatarUpload"
              >
                <img
                  height="200"
                  v-if="imageFile1"
                  :src="imageFile1"
                  class="avatar"
                />
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
            <el-form-item label="用户姓名" prop="userName" >
              <el-input v-model="updateForm.userName" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户手机号" prop="userPhone" >
              <el-input v-model="updateForm.userPhone" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="用户性别" prop="userSex" >
              <el-input v-model="updateForm.userSex" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="禁言状态" prop="logOff" >
              <el-input v-model="updateForm.logOff" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="注销原因" prop="cancellationReason" >
              <el-input v-model="updateForm.cancellationReason" auto-complete="off"></el-input>
            </el-form-item>
            <el-form-item label="注销时间" prop="cancellationTime" >
              <el-input v-model="updateForm.cancellationTime" auto-complete="off"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="detailsViews = false">取 消</el-button>
            <el-button type="primary" @click="update('updateForm')">确 定</el-button
            >
          </span>
      </el-dialog>
      <el-dialog
      :title=title
      :visible.sync="detailsViews"
      width="40%"
      center>
      <el-form :model="updateForm" ref="updateForm">
        <el-form-item label="用户个人信息">
          <el-upload
            class="avatar-uploader"
            action="'getImageById?id='+scope.row.imageId"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            style="margin-left: 280px"
            :before-upload="beforeAvatarUpload"
          >
            <img
              height="200"
              v-if="imageFile1"
              :src="imageFile1"
              class="avatar"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="用户姓名" prop="userName" >
          <el-input v-model="updateForm.userName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户手机号" prop="userPhone" >
          <el-input v-model="updateForm.userPhone" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="用户性别" prop="userSex" >
          <el-input v-model="updateForm.userSex" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="禁言状态" prop="logOff" >
          <el-input v-model="updateForm.logOff" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="注销原因" prop="cancellationReason" >
          <el-input v-model="updateForm.cancellationReason" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="注销时间" prop="cancellationTime" >
          <el-input v-model="updateForm.cancellationTime" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="detailsViews = false">取 消</el-button>
        <el-button type="primary" @click="update('updateForm')">确 定</el-button
        >
      </span>
  </el-dialog>
          <!-- 分页 -->
              <div style="padding:10px 0;">
                <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage4"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="5"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total" style="margin-top: 20px;">
              </el-pagination>
              </div>
  </div>
</template>
、
<script>
// import  request  from '@/utils/request.js'

export default {
  data () {
    return {
      beforeAvatarUpload: '',
      title: '',
      handleAvatarSuccess: '',
      detailsViews: false, // 用户详情弹框
      Fileimage: '', // 添加时赋值的
      Fileimage1: '', // 添加时赋值的
      imageFile1: '', // 图片路径回显
      imageFile2: '', // 图片路径回显
      currentPage4: 1, // 默认第几页
      // 表格数据
      tableData: [],
      // multipleSelection:[],
      pageNum: 1,
      pageSize: 5,
      total: 0,
      avatarUrl: '',
      // 模糊查搜索框数值
      sousuofrom: {
        userName: ''
      },
      updateForm: {
        cancellationTime: '',
        userName: '',
        userPhone: '',
        userSex: '',
        prohibition: '',
        cancellationReason: '',
        imageId: '',
        restoreId: ''
      },
      rules: {
        nickname: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 6, message: '长度在 1 到 6个字符', trigger: 'blur' }
        ]
      }
    }// return
  },
  mounted () {
    this.load()
  },
  // 方法集合
  methods: {
    details (row) { // 查询注销的用户信息详情
      this.title = '详情'
      this.detailsViews = true
      this.updateForm = JSON.parse(JSON.stringify(row))
      this.imageFile1 =
        $imageUrl + row.imageId
    },
    ReportAdd (row) { // 测试
      this.updateForm = JSON.parse(JSON.stringify(row))
      this.$axios.get('/cancel/RecoverAdd', {
        params: {
          restoreId: this.updateForm.cancellationId
        }
      }).then((res) => {
        if (res.data.flag) {
          this.myMessage('success', '操作成功') // 添加或修改成功提示
          this.reporeView = false // 关闭窗口
          this.load()
        } else {
          this.myMessage('warning', res.data.code)
        }
      }).catch((err) => {
        this.myMessage('warning', '对不起，保存失败，请您稍后再试！') // 添加或修改失败
      })
    },
    myMessage (type, message) {
      this.$message({
        message: message,
        type: type
      })
    },
    load () { // 根据名称查询注销的用户
      this.$axios.get('/cancel/userCancelList',
        {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            userName: this.sousuofrom.userName
          }
        }).then(res => {
        this.tableData = res.data.data.content
        this.total = res.data.data.totalSize
      }).catch(err => {
      })
    },

    handleSizeChange (val) { // 改变每页条数
      this.pageSize = val
      this.load()
    },
    handleCurrentChange (val) { // 改变当前页
      this.pageNum = val
      this.load()
    }
  }
}
</script>

<style scoped>
html,body,div{
  margin: 0;
  padding: 0;
  text-align: left;
}
html.body{
  height: 100%;
}
/* *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
} */
.ml-5{
  margin-left: 5px;

}
.mr-5{
  margin-right: 5px;
}
.pd-10{
  padding: 10px 0;
}
</style>
